<template>
	<!--  pagesPadding -->
	<view class="pagesExpert">
		<view class='thematicIconBox' v-if='isHidden!=1 &&isThematic'>
			<view class='closeBox' @click="closeThematicActivity">
				<u-icon color="red" name="close-circle"  bold></u-icon>
			</view>
			<u--image @click="goThematicActivity" src="/static/images/index/thematicIcon.png" width="260rpx"
				height="160rpx"></u--image>
		</view>
		<scrollArticle v-if="scrollArticleShow" @closeScrollArticle='closeScrollArticle' codeId="expertPeopleList">
		</scrollArticle>
		<searchBox v-if="entranceType==2" currentCode='pagesExpert' @handleSearch='handleSearch'></searchBox>
		<view class="content" v-if="expertPeopleArr&&expertPeopleArr.length>0">
			<view class="cardItem" v-for="(item, index) in expertPeopleArr" :key="index">
				<view class="first">
					<view class="cardItemImage" @click="goToExpertDetail(item)">
						<!-- #ifdef H5 -->
						<easy-loadimage mode="widthFix" class="cardItemImage_img" :scroll-top="scrollTop"
							:image-src="item.headUrl?item.headUrl:avatar"></easy-loadimage>
						<!-- #endif -->
						<!-- #ifdef MP -->
						<view class="cardItemImage_img"
							:style="{backgroundImage: 'url(' +item.headUrl?item.headUrl:avatar + ')', backgroundSize: '100% 100%'}">
						</view>
						<!-- #endif -->
					</view>
					<view class="firstRight">
						<view class="">
							<text class="name">{{item.name}}</text>
						</view>
						<view>
							<text class="profession" v-if="item.medicalTitleName">{{item.medicalTitleName}}</text>
							<text class="profession">{{item.institutionName}}</text>
						</view>
						<view class="good">
							<view class="mr">
								擅长:
							</view>
							<view class="tagItem" v-for="(itemF, indexF) in item.proficientInNameList" :key="indexF">
								<u-tag :text="itemF" size="mini" type="success" plain>
								</u-tag>
							</view>
						</view>
						<view class="good" v-if="item.specialServicesFlag == 1 && item.specialServicesCost"
							:class="(item.activityCost||item.activityCost===0)?'middleLine':''">
							<view class="mr">会诊:</view>
							<view>
								<text class="applyPrice">{{item.specialServicesCost}}</text>
								<text class="unit">元/次</text>
							</view>

						</view>
						<view class="good" v-if="item.specialServicesFlag == 1 && item.activityCost ">
							<view class="applyPriceTitle">{{item.title}}:</view>
							<view>
								<text class="applyPrice">{{item.activityCost}}</text>
								<text class="unit">元/次</text>
							</view>


						</view>

						<view class="good"
							v-if="item.specialServicesFlag != 1 || !item.specialServicesCost||item.activityCost===0">
							<view class="applyPriceTitle" v-if="item.activityCost===0">{{item.title}}:</view>
							<view class="mr" v-else>会诊:</view>
							<view class="ml">
								<text class="applyPrice">{{item.specialServicesFlag == 1 ? '免费' : '未开通'}}</text>
							</view>

						</view>

					</view>
				</view>
				<view class="two">
					<view class="btn1">
						<u-button @click="goToExpertDetail(item)" plain type="primary" size="mini">专家介绍</u-button>
					</view>
					<view class="btn2" v-if="item.specialServicesFlag==1">
						<u-button v-if='judgment(item)' @click="chooseDoctorEvent(item)" type="error"
							size="mini">已申请</u-button>
						<u-button v-else @click="chooseDoctorEvent(item)" type="primary" size="mini">申请该专家会诊</u-button>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" />
			<view class="applyBox" @click="openPopup" v-if="selectPeopleArr.length>0">
				已选择
			</view>

		</view>
		<pagesNoData v-else></pagesNoData>

		<u-popup :show="showPopup" @close="closePopup" closeable>
			<view class="popupBox">
				<view class="popupBoxContent">
					<view class="title">
						<view class="line"></view>
						已申请医生

					</view>
					<view class="itemBox" v-for="(item,index) in selectPeopleArr" :key="index">
						<view class="left">
							<view class="name">{{item.name}}</view>
							<view>({{item.institutionName}})</view>
						</view>
						<view class="right">
							<view v-if="item.activityCost || item.activityCost===0 ">
								<text class="price">{{item.activityCost?item.activityCost:'免费'}}</text>
								<text class="unit" v-if="item.activityCost">元/次</text>
							</view>
							<view v-else>
								<text class="price">{{item.specialServicesCost?item.specialServicesCost:'免费'}}</text>
								<text class="unit" v-if="item.specialServicesCost">元/次</text>
							</view>

							<view class="tagBox">
								<u-tag text="取消" @click="remove(item)" plain size="mini" type="error"></u-tag>
							</view>

						</view>
					</view>
				</view>

				<view class="totalPrice" v-if="totalPrice!='0.00'">
					共需自费支付
					<text class="red">{{totalPrice}}</text>
					元
				</view>

				<view class="btnBox">

					<view class="btn1">
						<u-button class="custom-style" @click="closePopup" type="success" size="mini">
							再选医生
						</u-button>
					</view>
					<view class="btn1 btn2">
						<u-button class="custom-style" @click="goApply" type="primary" size="mini">
							下一步:填写基本信息
						</u-button>
					</view>
				</view>
			</view>

		</u-popup>

	</view>
</template>

<script>
	import config from '@/config'
	import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue'
	import scrollArticle from '@/components/scrollArticle/scrollArticle.vue'
	import {
		getDoctorList
	} from '@/api/platform/users.js'
	import {
		getInstitutions,
		getPlatform
	} from '@/api/platform/institutions.js'
	import {
		getDicts
	} from '@/api/platform/dicts.js'
	export default {
		name: "expert",
		props: ['entranceType', 'isHidden'], //entranceType  1:专家介绍进入 2:特需会诊进入  isHidden 1:隐藏(从专题活动进来)
		computed: {
			isActivityCost() {
				return this.selectPeopleArr.some(item => {
					return item.activityCost || item.activityCost === 0
				})
			},
			totalPrice() {
				if (this.isActivityCost) {
					return this.selectPeopleArr.reduce((pre, cur) => {
						return (pre + cur.activityCost)
					}, 0).toFixed(2)
				} else {
					return this.selectPeopleArr.reduce((pre, cur) => {
						return (pre + cur.specialServicesCost)
					}, 0).toFixed(2)
				}



			}
		},
		components: {
			scrollArticle,
			easyLoadimage
		},
		data() {
			return {
				scrollArticleShow: true,
				scrollTop: 0,
				imgUrl: config.imageServiceURL,
				contentheightData: 'calc(100vh - 658rpx)',
				status: 'loadmore',
				avatar: '/static/images/index/doctor.png',
				total: 0,
				query: {
					page: 0,
					size: 10,
					institutionId: '',
					proficientIn: '',
					medicalTitle: '',

				},
				expertPeopleArr: [],
				selectPeopleArr: [],
				// selectPeopleArrIds: [],
				showPopup: false,
				platformInfos: '', //平台信息
				isThematic:true,
			};
		},
		mounted() {
			if (this.isHidden) {
				this.scrollArticleShow = false
			} 
			this.getDoctorList()
			this.getPlatform()
			let isBool = this.selectPeopleArr.every(item => {
				return item.activityCost && item.activityCost >= 0
			})

		},

		methods: {
			closeScrollArticle() {
				this.scrollArticleShow = false
			},
			closeThematicActivity(){
				this.isThematic=false
			},
			goThematicActivity() {
				uni.navigateTo({
					url: `/subPackages/service/thematicActivity/thematicActivity`
				})
			},
			goApply(item) {
				let data = {
					amount: '',
					project: this.selectPeopleArr,
					institutionId: this.platformInfos.sponsorId,
					institutionName: this.platformInfos.sponsorName,
					type: "3" //特需会诊申请
				}
				this.$store.commit('setConsultaServiceObj', data)
				uni.navigateTo({
					url: `/subPackages/appointment/notice/notice?orgtype=${3}`
				})
			},
			remove(obj) {
				console.log('---------')
				this.selectPeopleArr = this.selectPeopleArr.filter(item => {
					return item.id != obj.id
				})
				if (this.selectPeopleArr.length == 0) {
					this.closePopup()
				}
				console.log('this.selectPeopleArr', this.selectPeopleArr)

			},
			chooseDoctorEvent(obj) {
				const itemObj = this.selectPeopleArr.find(item => {
					return item.id == obj.id
				})
				if (itemObj) {

				} else {
					this.selectPeopleArr.push(obj)
					// this.selectPeopleArrIds.push(obj.id)
				}
				this.showPopup = true

			},
			judgment(obj) {
				const itemObj = this.selectPeopleArr.find(item => {
					return item.id == obj.id
				})
				if (itemObj) {
					return true
				} else {
					return false
				}
			},
			closePopup() {
				this.showPopup = false
			},
			openPopup() {
				this.showPopup = true
			},
			onScroll(e) {
				// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
				this.scrollTop = e.scrollTop;
				// console.log('onScroll--',e)
			},
			getReachBottom() {
				console.log("加载分页 getReachBottom")
				let that = this;
				this.status = 'loading';
				this.query.page = ++this.query.page;
				setTimeout(() => {
					if (this.expertPeopleArr.length < this.total) {
						this.status = 'loadmore'
						that.getDoctorList()
					} else {
						this.status = 'nomore'
					}

				}, 600)

			},
			handleSearch(data) {
				this.query = data
				this.expertPeopleArr = []
				this.getDoctorList()
			},
			goToExpertDetail(item) {
				this.$store.commit('setDetailObj', item)
				uni.navigateTo({
					url: '/subPackages/expert/detail'
				})
			},
			getDoctorList() {
				if(this.isHidden==1){
					this.query.size = 999
					getDoctorList(this.query).then(res => {
						if (res.code == 200) {
							this.total = res.pageInfo.total
							let expertPeopleArr = res.data
							this.expertPeopleArr=expertPeopleArr.filter(item => {
								return item.remark.includes('乳腺')
							})
							this.expertPeopleArr.forEach(item => {
								item.headUrl = this.imgUrl + item.headUrl
							})
					
							this.status = 'nomore'
						} else {
							this.expertPeopleArr = []
							this.status = 'nomore'
						}
					})
				}else{
					getDoctorList(this.query).then(res => {
						if (res.code == 200) {
							this.total = res.pageInfo.total
							let expertPeopleArr = res.data
							expertPeopleArr.forEach(item => {
								item.headUrl = this.imgUrl + item.headUrl
							})
							this.expertPeopleArr.push(...expertPeopleArr)
							if (this.expertPeopleArr.length < this.total) {
								this.status = 'loadmore'
							} else {
								this.status = 'nomore'
							}
						} else {
							this.expertPeopleArr = []
							this.status = 'nomore'
						}
					})
				}
				
			},
			getPlatform() {
				getPlatform().then(res => {
					if (res.code == 200) {
						this.platformInfos = res.data
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.middleLine {
		text-decoration: line-through;
		text-decoration-color: red;
	}

	.pagesExpert {
		.thematicIconBox {
			display: inline-block;
			position: fixed;
			right: 10rpx;
			bottom: 60rpx;
			z-index: 999;
			.closeBox{
				position: absolute;
				left: 0;
				z-index: 9999;
				width: 40rpx;
				height: 40rpx;
			}
		}

		.searchBox {
			::v-deep .u-form-item__body {
				padding: 5rpx 0 !important;
			}
		}

		.content {
			position: relative;

			.cardItem:first-child {
				margin-top: 0rpx;
			}

			.cardItem {
				margin: 24rpx 16rpx;
				padding: 16rpx;
				box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.3);
				border-radius: 8rpx;

				.first {
					display: flex;
					// justify-content: space-between;

					.cardItemImage {
						width: 180rpx;
						height: 180rpx;
						border-radius: 4px;
						background: #eee;
						overflow: hidden;
						// margin-right:40rpx ;

						.cardItemImage_img {
							width: 100%;
							height: 100%;
							display: block;
						}
					}

					.firstRight {

						width: calc(100% - 220rpx);
						margin-left: 24rpx;

						.name {
							font-weight: bold;
							font-size: 32rpx;
							line-height: 52rpx;
							color: #3D3D3D;
							margin-right: 28rpx;
						}

						.sex {
							font-size: 24rpx;
							color: #3D3D3D;
							margin-right: 14rpx;
						}

						.profession {
							font-size: 24rpx;
							line-height: 40rpx;
							color: #156DCB;
							margin-right: 14rpx;
						}

						.good {
							display: flex;
							flex-wrap: wrap;
							// font-weight: bold;
							line-height: 40rpx;
							font-size: 24rpx;
							color: #3D3D3D;

							// overflow: hidden;
							// white-space: nowrap;
							// text-overflow: ellipsis;
							.mr {
								margin-right: 14rpx;
							}

							.ml {
								margin-left: 14rpx;
							}


							.great {
								color: #BCBCBC;
								font-weight: normal;
								margin-left: 14rpx;
							}

							.applyPrice {
								font-weight: bold;
								font-size: 36rpx;
								color: #FF5709;
								margin-right: 14rpx;
							}

							.applyPriceTitle {
								font-weight: bold;
								color: #FF5709;
								margin-right: 14rpx;
								// font-family: "楷体";
							}

							.unit {
								font-weight: normal;
							}

							.tagItem {
								margin-right: 20rpx;
								margin-bottom: 10rpx;
							}
						}
					}
				}

				.two {
					display: flex;
					margin: 10rpx 0;

					.btn1 {
						// width: 144rpx;
						margin-right: 32rpx;
					}

					.btn2 {
						// width: 220rpx ;
					}
				}


			}

			.applyBox {

				position: fixed;
				right: 40rpx;
				bottom: 360rpx;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				text-align: center;
				line-height: 80rpx;
				font-size: 16rpx;
				box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.3);
				background: rgba(250, 188, 34, 1);
				font-size: 20rpx;
				color: #fff;
			}
		}

		.popupBox {
			padding: 80rpx 24rpx 24rpx;

			.popupBoxContent {
				background: #E4F1FF;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 2rpx solid #3898FF;
				padding: 24rpx;

				.title {
					display: flex;
					align-items: center;
					// color: #3898FF;
					margin-bottom: 18rpx;
					font-size: 28rpx;

					.line {
						width: 8rpx;
						height: 28rpx;
						background: #3898FF;
						border-radius: 8rpx;
						margin-right: 16rpx;
					}

				}

				.itemBox {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 24rpx;
					color: #3D3D3D;
					margin-bottom: 10rpx;
					border-bottom: 1px solid #979797;

					.left {
						.name {
							margin-right: 20rpx;
						}
					}

					.right {
						// position: relative;
						display: flex;

						.price {
							color: #FF5709;
							font-size: 30rpx;
							font-weight: bold;
							width: 60rpx;
						}

						.unit {
							margin-left: 20rpx;
						}

						.tagBox {
							margin-left: 20rpx;
							width: 90rpx;


						}


					}
				}
			}

			.totalPrice {
				font-size: 24rpx;
				color: #BCBCBC;
				text-align: center;
				margin-top: 24rpx;

				.red {
					font-size: 36rpx;
					color: #FF5709;
					font-weight: bold;
					margin: 0 20rpx;
				}
			}

			.btnBox {
				display: flex;
				justify-content: space-around;

				.btn1 {
					// width: 160rpx;
					margin: 30rpx auto;

					.custom-style {
						font-size: 30rpx;
					}
				}

				.btn2 {
					// width: 360rpx;

				}
			}

			.notice {
				text-align: center;
				color: #007BFF;
			}
		}

	}
</style>